<template>
    <div class="container">
        <div class="line">
            <span class="label">请选择目录:</span>
            <div class="hierarchy">
                <Cascader :data="menuData" v-model="menu"></Cascader>
            </div>
            <div class="search-container">
                <router-link to="/goodsEdit">
                    <Button type="primary" class="fr">发布新产品</Button>
                </router-link>
                <Button type="primary" icon="ios-search" class="fr" @click="Search">Search</Button>
                <Input v-model="search" class="fr" placeholder="请输入关键字" style="width: 300px"></Input>
            </div>
        </div>
        <Table border :columns="columns" :data="table"></Table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                /* 表格数据，自定义查看删除等按钮需要JSX生成 */
                columns: [{
                        title: '商品名称',
                        key: 'goods_name'
                    },
                    {
                        title: '是否上架',
                        key: 'goods_status'
                    },
                    {
                        title: '商品简介',
                        key: 'goods_describe',
                    },
                    {
                        title: '商品图片',
                        key: 'goods_file1',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    placement: 'bottom'
                                },
                                style:{
                                        width: '80px',
                                        margin: '0 auto',
                                        display: 'block'
                                    }
                            },[
                                h('Button','查看图片'),
                                h('div',{
                                    slot: 'content'
                                },[
                                    h('img',{
                                        attrs:{
                                            width: 100,
                                            height: 100,
                                            src: this.$api+params.row.goods_file1,
                                        }
                                    })
                                ])
                                
                            ])
                        }
                    },
                    {
                        title: '商品价格',
                        key: 'goods_price'
                    },
                    {
                        title: '更新时间',
                        key: 'register_date'
                    },
                    {
                        title: '操作',
                        key: 'option',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                menu: [],
                table: [],
                search: '',
                menuData: []
            }
        },
        created: function () {
            let that = this
            this.$axios.get(this.$api+'/api/admin/MenuGet', {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                .then(function (response) {
                    that.menuData = response.data.menu
                })
        },
        methods: {
            /**
            *@function 通过设置的要求查找产品，并显示
            */
            Search: function () {
                let that = this
                let uid = that.menu.concat().pop()
                this.$axios.post(this.$api+'/api/admin/goodsGet', {
                        uid: typeof (uid) == 'undefined' ? 0 : uid,
                        keyWord: that.search
                    }, {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                    .then(function (response) {         
                        for(let i in response.data.list){
                            /* 商品状态换成文字，用户看不懂二进制 */
                            response.data.list[i].goods_status=response.data.list[i].goods_status=='1'?'是':'否'
                            that.table.push(response.data.list[i]);
                        }
                    })
                    .catch(function (response) {
                        
                    })
            },
            /**
            *@function 在新窗口打开用户选择的商品详情页
            *@param {Int} index 用户选中的索引，需要到数据中去找他的Uid  
            */
            show: function (index) {
                window.open('http://localhost:8081/#/product/' + this.table[index].uid + '/4');
            },
            /**
            * @function 打开商品编辑页，根据用户选中的index去找Uid并生成链接 
            * @param {Int} index 用户选中的索引，需要到数据中去找他的Uid  
            */
            edit: function (index) {
                this.$router.push({
                    path: 'goodsEdit',
                    query: {
                        uid: this.table[index].uid
                    }
                })
            },
            /**
            * @function 删除商品，根据用户选中的index去找Uid删除 
            * @param {Int} index 用户选中的索引，需要到数据中去找他的Uid  
            */
            remove: function (index) {
                let that = this
                this.$axios.post(this.$api+'/api/admin/goodsRemove', {
                        uid: that.table[index].uid
                    }, {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                    .then(function (response) {
                        if (response.data.state == 1) {
                            that.$Notice.success({
                                title: '删除成功',
                                desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                            });
                        } else {
                            that.$Notice.error({
                                title: '删除失败',
                                desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                            });
                        }
                    })
                    .catch(function (response) {
                        that.$Notice.error({
                            title: '删除失败',
                            desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                        });
                    })
            }
        }
    }
</script>

<style lang="less" scoped>
    .container {
        width: 1200px;
        margin: 0 auto;
        .line {
            width: 1200px;
            margin: 10px auto 0;
            height: 50px;
            .label {
                float: left;
                line-height: 50px;
                margin-right: 10px;
            }
            .hierarchy {
                width: 200px;
                float: left;
                height: 32px;
                margin: 9px auto;
            }
            .search-container {
                float: right;
                height: 32px;
                margin: 9px auto;
                .fr {
                    float: right;
                    margin-left: 10px;
                }
            }
        }
    }
</style>